<template>
  <div class="packageManage">
    <el-dialog title="选择情形包" :visible.sync="showDialog" width="70%">
      <div class="searchBox">
        <el-input
          v-model="name"
          placeholder="请输入情形名称"
          clearable
          style="width: 280px; margin-right: 10px"
        ></el-input>
        <el-button type="primary" @click="onSearch" style="width: 120px">搜索</el-button>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          border
          highlight-current-row
          @select="handleSelectionChange"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="situationObjectName" label="情形名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="implementName" label="情形项" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-for="x in scope.row.situationItems" :key="x.situationItemId">{{ x.situationItemName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="implementCoding" label="提交材料" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-for="x in scope.row.situationItems" :key="x.situationObjectId">
                <span v-for="y in x.materialObjs" :key="y.materialId" style="margin-right: 5px">
                  {{ y.materialName }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getSituationList, addPackage } from '@/api/situation/index';
  export default {
    props: {},
    watch: {},
    data() {
      return {
        loading: false,
        showDialog: false,
        tableData: [],
        name: '',
        eventId: '',
        choiceRow: '',
        situationItemId: '',
        situationPackageId: '',
        current: 1, //当前页
        size: 5, //每页的数量
        total: 0
      };
    },
    methods: {
      handleSizeChange(val) {
        this.current = 1;
        this.size = val;
        this.initPage();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.initPage();
      },
      handleSelectionChange(selection, row) {
        //获取选中的行
        this.$refs.multipleTable.clearSelection();
        if (selection.length === 0) {
          // 判断selection是否有值存在
          return;
        }
        this.choiceRow = row;
        this.$refs.multipleTable.toggleRowSelection(row, true);
      },
      submit() {
        if (!this.choiceRow) {
          this.$message.warning('请选择情形');
          return false;
        }
        console.log(this.choiceRow);
        addPackage(this.eventId, {
          situationItemId: this.situationItemId,
          situationPackageId: this.situationPackageId,
          situationObjectId: this.choiceRow.situationObjectId
        }).then((res) => {
          if (res.data.code == 200) {
            this.showDialog = false;
            this.$message.success('添加成功');
            this.$emit('success');
          }
        });
      },
      onSearch() {
        this.initPage();
      },
      initPage() {
        let params = {
          current: this.current,
          size: this.size,
          name: this.name
        };
        this.loading = true;
        getSituationList(params).then((res) => {
          this.loading = false;
          if (!res.data || !res.data.result) return;
          this.tableData = res.data.result.records;
          this.total = res.data.result.total;
        });
      }
    },
    mounted() {
      this.initPage();
    }
  };
</script>

<style lang="scss">
  .searchBox {
    padding: 0 30px 10px;
    display: flex;
  }
  .packageManage {
    .fenye {
      margin: 20px 0;
      text-align: center;
    }
    .el-table__header-wrapper .el-checkbox {
      display: none;
    }
  }
</style>
